<template>
  <van-tabbar
    class="footer"
    v-model="active"
    active-color="#dd1a21"
    inactive-color="#666"
  >
    <van-tabbar-item @click="goHome" icon="wap-home">首页</van-tabbar-item>
    <van-tabbar-item @click="toCategory" icon="orders-o">分类</van-tabbar-item>
    <van-tabbar-item @click="toWord" icon="like-o">值得买</van-tabbar-item>
    <van-tabbar-item @click="toCart" icon="cart-o" badge="20"
      >购物车</van-tabbar-item
    >
    <van-tabbar-item @click="toPersonal" icon="friends-o" :dot="!isLogin"
      >个人</van-tabbar-item
    >
  </van-tabbar>
</template>

<script>
export default {
  data() {
    return {
      active: 0, //footer选择的图标
      isLogin: false, //是否登录
    };
  },
  methods: {
    //点击跳转首页
    goHome() {
      this.$router.push({
        path: "/home",
      });
      localStorage.removeItem("active");
    },
    //点击跳转到分类页
    toCategory() {
      this.$router.push({
        path: "/category",
      });
    },
    //点击跳转到值得买
    toWord() {
      this.$router.push({
        path: "/worth",
      });
    },
    //点击跳转到购物车
    toCart() {
      this.$router.push({
        path: "/cart",
      });
    },
    //点击跳转到个人页
    toPersonal() {
      this.$router.push({
        path: "/personal",
      });
    },
  },
  mounted() {
    // 通过token判断用户是否登录;
    let token = localStorage.getItem("token");
    console.log(token);
    if (token) {
      this.isLogin = true;
    }
  },
};
</script>

<style lang="less" scoped></style>
